<template>
  <div>
    <n-card :title="route.params.state=='1'?'正在发布':'正在修改'">
      <div style="margin-bottom: 5px;">
 <n-input   ref="inputInstRef"  v-model:value="formData.title" placeholder="请输入文章标题" />
      
      </div>
      <div style="margin-bottom: 5px;">
 <n-dynamic-tags v-model:value="formData.tags" />
      
    </div>

    

   <MdEditor     :class="mydarkTheme?'vae-md-editor':''" v-model="formData.content"
             @onUploadImg="onUploadImg"
                @onSave="codeSave" />
              <br>
                <n-space justify="center">

                  <n-button type="info" ghost @click="router.go(-1)">
                    <template #icon>
                      <n-icon>
                        <ArrowUndo />
                      </n-icon>
                    </template>
                    返回
                  </n-button>
    <n-button type="warning" ghost @click="codeSave">
      保存
    </n-button>
    <n-button type="error" @click="codeSave" ghost>
      发布
    </n-button>
  </n-space>
  </n-card>

</div>
</template>

<script  setup lang="ts">
import {ref,reactive} from "vue"

import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import {storeToRefs} from 'pinia'
import { VaeStore } from '../store'
import { useMessage,InputInst  } from 'naive-ui'
import {useRoute, useRouter} from 'vue-router'
const route=useRoute();
const router=useRouter();

const inputInstRef = ref<InputInst | null>(null)
//解构
const store = VaeStore();
let {mydarkTheme} = storeToRefs(store);
  const message = useMessage()
const formData=reactive({
  title:'',
  content:'',
  tags:['小米日常']
})
//保存
const codeSave = (v: string):void => {

  const {title,tags,content}=formData;
  if(!title){inputInstRef.value?.focus(); message.error('请输入文章标题！'); ; return}
  if(tags.length<1 || tags.length>5){ message.error('标签长度请在1-5之间！');return}
  if(!content){ message.error('文章内容不可为空！');return}
 

  message.success('标题：'+title)
  message.success('内容：'+content)
        }
 // 图片上传
 const   onUploadImg=async(files: FileList, callback: (urls: string[]) => void) =>{
            const res = await Promise.all(
                Array.from(files).map((file) => {
                    return new Promise((rev, rej) => {
                        const form = new FormData();
                        form.append('img', file);
                        // 发送请求，获取图片地址
                            rev(['https://img.zhangpingguo.com/apple_Article_Head/apple1706331015547/6531e0df-8feb-4dff-a958-305ca5ab331c.png'])
                    });
                })
            );

            callback(res.map((item: any) => item));
        }



</script>

<style lang="less" scoped>
.md-editor{
  height: 80vh;
}
.vae-md-editor{
  // background: #ccc;
  opacity: 0.5;
}
&:deep(.md-editor-toolbar-left,.md-editor-toolbar-right,.md-editor-toolbar,.md-editor-toolbar){
  overflow: auto !important;
  display: inline !important;
  height: 100% !important;
  width: 100% !important;
}
</style>
